<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>聊天页</title>
    <style>
        .box{
            width: 100%;
            height: 500px;
            position:absolute;
            top:0;
        }
        #content{
            width: 96%;
            height: 500px;
            border-width: 1px;
            border-color: #6C6C6C;
            margin-right:1%;
            margin-left:1%;
        }
        form{
            width: 100%;
            height:60px;
            line-height:40px;
            border-top:1px solid #ccc;
            position:absolute;
            bottom:0;
            left:0;
        }
        #content form img{
            border:1px solid #ccc;
            border-radius:7px;
            padding:2px;
            cursor:pointer;
            margin:5px 0 0 5px;
            float:left;
            width:40px;
            height:40px;
        }
        #content form input[type='text']{
            width:80%;
            height:40px;
            line-height:27px;
            border-radius:7px;
            border:1px solid #ccc;
            float:left;
            margin-left:5px;
            margin-top:5px;
            outline:none;
            padding:0 5px;
        }
        #content form input[type='button']{
            width:12%;
            height: 40px;
            border-radius:5px;
            background:#fff;
            border:none;
            margin-left:1%;
            cursor:pointer;
            font-size:27px;
            margin-top:5px;
        }

        .info_box{
            width: 100%;
            height:440px;
            overflow-y:auto;
        }
        .info_box::-webkit-scrollbar {display:none}
        .info_box div{
            margin:0 0 5px;
            position:relative;
        }
        .info_box .info_r{

        }
        .info_box .info_l{

        }
        .info_box .info_l img{
            position:absolute;
            left:0;
            top:0;
        }
        .info_box .info_r img{
            position:absolute;
            right:0;
            top:0;
        }
        .info_box .info_l span{margin-left: 60px;margin-top:16px;}
        .info_box .info_r span{margin-left:28%;margin-top:16px;}
        .info_box .info_m span{}
        .info_box .msg_r{
            width: 66%;
            height: auto;
            font-size:14px;
            background:#ddd;
            border-radius: 10px;
            padding:8px;
            color:#333;
            display: block;
            position:relative;
            top:0;
            text-align: right;
        }
        .info_box .msg_l{
            width: 66%;
            height: auto;
            font-size:14px;
            background:#ddd;
            border-radius: 10px;
            padding:8px;
            color:#333;
            display: block;
            position:relative;
            top:0;
        }
        .info_box .msg_m{
            width: 100%;
            font-size:14px;
            padding:8px;
            display: block;
            text-align: center;
            margin-top: 20px;
            color: gray;
        }
        .info_box .info_l img{
            float:left;
            width:50px;
            height:50px;
        }
        .info_r img{
            float:right;
            width:50px;
            height:50px;
        }
    </style>

    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
    <script th:inline="javascript" language="javascript" type="text/javascript">
        var socket;
        $(function(){

                function openSocket() {
                if (typeof (WebSocket) == "undefined") {
                    console.log(">>>>>>您的浏览器不支持WebSocket");
                } else {
                    console.log(">>>>>>您的浏览器支持WebSocket");
                    var socketUrl = "http://localhost:8080/websocket/" + $("#roomId").val() + "/" + $("#userId").val();
                    socketUrl = socketUrl.replace("https", "ws").replace("http", "ws");
                    if (socket != null) {
                        socket.close();
                        socket = null;
                    }
                    socket = new WebSocket(socketUrl);
                    //打开事件
                    socket.onopen = function () {
                        console.log(">>>>>>websocket发起连接，userId: " + $("#userId").val());
                        //socket.send('{"type":"open","contentText":"客户端打开websocket连接' + location.href + '/' + new Date() + '"}');
                    };
                    //获得消息事件
                    socket.onmessage = function (msg) {
                        var json = $.parseJSON(msg.data);
                        //todo 发现消息进入    开始处理前端触发逻辑
                        msgArea(json);
                    };
                    //关闭事件
                    socket.onclose = function () {
                        console.log(">>>>>>websocket断开连接");
                    };
                    //发生了错误事件
                    socket.onerror = function () {
                        console.log(">>>>>>websocket发生了错误");
                    }
                }
            }

            function msgArea(json) {
                console.log(">>>>>>websocket接收到消息," + json);
                var msgElm = $(".info_box");
                var htmlMsg = '';
                var ico = "/img/icon/man.ico";
                var rOrL = "l";

                if (json.data.type === "open") {
                    console.log(">>>>>>websocket已连接");
                    htmlMsg = "<div class='info_m'><span class='msg_m'>"+ json.data.data.content +"</span></div>";
                } else if (json.data.type === "close") {
                    console.log(">>>>>>websocket已断开连接");
                    htmlMsg = "<div class='info_m'><span class='msg_m'>"+ json.data.data.content +"</span></div>";
                } else if (json.data.type === "send") {
                    debugger
                    console.log(">>>>>>websocket已消费消息");
                    if (json.data.data.fromUserId === $("#userId").val()) {
                        rOrL = "r";
                    }
                    htmlMsg = '<div class="info_'+ rOrL +'">';
                    //头像
                    if (json.data.data.imgUrl === "") {
                        if (json.data.data.gender === "0") {
                            ico = "/img/icon/wumen.ico";
                        }
                        htmlMsg = htmlMsg + "<img src="+ ico +" class='pic_"+ rOrL +"'>";
                    } else {
                        htmlMsg = htmlMsg + "<img src="+ json.data.data.imgUrl +" class='pic_"+ rOrL +"'>";
                    }
                    //消息内容
                    if (json.data.data.fromUserId === $("#userId").val()) {
                        htmlMsg = htmlMsg + "<span class='msg_"+ rOrL +"'>"+ json.data.data.userName + ":<br/>" + json.data.data.content +"</span></div>";
                    } else {
                        htmlMsg = htmlMsg + "<span class='msg_"+ rOrL +"'>"+ json.data.data.userName + ":<br/>" + json.data.data.content +"</span></div>";
                    }
                } else {
                    console.log(">>>>>>websocket未知消息类型");
                    htmlMsg = "<div class='info_m'><span class='msg_m'>未知消息类型</span></div>";
                }

                msgElm.append(htmlMsg);
            }

            openSocket();

        });

        function sendMessage() {
            var contentText = $("#contentText").val();
            if (contentText === "") {
                alert("发送信息不能为空！");
            }
            if (typeof (WebSocket) === "undefined") {
                console.log(">>>>>>您的浏览器不支持WebSocket");
            } else {
                socket.send('{"toUserId":"' + $("#toUserId").val() + '"'
                    + ',"type":"send"'
                    + ',"content":"' + contentText + '"}');
                $("#contentText").val("");
            }
        }

    </script>

</head>
<body>
<div class="box">
    <input th:id="roomId" th:name="room" th:type="hidden" th:value="${room}"/>
    <input th:id="userId" th:name="userId" th:type="hidden" th:value="${user.id}"/>
    <input th:id="toUserId" th:name="toUserId" th:type="hidden"/>
    <div id="content">
        <div class="info_box">
            <!--<div class="info_r">
                <img src="/img/icon/man.ico" class='pic_r'>
                <span class='msg_r'>我的消息</span>
            </div>

            <div class="info_m">
                <span class='msg_m'>[张三]已退出聊天室</span>
            </div>

            <div class="info_l">
                <img src="/img/icon/wumen.ico" class='pic_l'>
                <span class='msg_l'>朋友消息</span>
            </div>-->
        </div>
        <form action="">
            <!--<img src="/img/icon/wumen.ico" id='pic'>-->
            <input th:type="text" th:placeholder='尽情畅聊吧' th:id='contentText' th:name="contentText">
            <input th:type="button" th:value='发送' th:id='send' th:onclick="sendMessage()">
        </form>
    </div>
</div>

</body>
</html>